<template>
  <div class="line-chart" ref="chartRef">

  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
const chartRef = ref();
const props = defineProps({
  data:{
    type: Array,
  },
  x:{
    type: Array,
  },
  name:{
    type: String,
  }
})
let chart
const init = () => {
  console.log('调用了init')
  let option = {
    title: {
      text: props.name,
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: [ '发货数', '上架数','航程天数']
    },
    xAxis: [
      {
        boundaryGap: true,
        type: 'category',
        data: props.x,
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '柜子数目',
        min: 0,
        max:80,
        interval: 10,
      },
      {
        type: 'value',
        name: '航程天数',
        min: 0,
        max:80,
        interval: 10,
      }
    ],
    series: [
      {
        name: '发货数',
        type: 'line',
        data: props.data[0]
      },
      {
        name: '上架数',
        type: 'line',
        data: props.data[1]
      },
      {
        name: '航程天数',
        type: 'bar',
        data: props.data[2],
        barWidth: 50,
        yAxisIndex: 1,
      },
    ]
  };
  chart.setOption(option);
}
onMounted(() => {
  chart = echarts.init(chartRef.value);
  init();
})
defineExpose({
  init
})
</script>
<style scoped lang="less">
.line-chart {
  width:90%;
  height:500px;
}
</style>
